<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>字体设置</title>

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />

  <script src="../js/vue/vue.js"></script>

  <link rel="stylesheet" href="../js/elementui/index.css">
  <script src="../js/elementui/index.js"></script>
  <script src="../js/theme/FileSaver.js"></script>
  <script src="/js/theme/pptx/libs/jquery.min.js"></script>
  <script src="/js/common.js?t=20250804"></script>
  <link rel="stylesheet" href="../css/common.css">

  <link rel="stylesheet" href="/js/layer/layer.css" type="text/css">
  <script src="/js/layer/layer.js"></script>

</head>

<body>
  <div id="app">
    <div class="font-editor">
      <el-form ref="form" :model="form" label-width="120px" size="small">

        <el-row v-for="(item,index) in form.list" :key="item.name">
          <el-col :span="6">
            <el-form-item label="字体名称">
              <el-input type="text" v-model="item.name" placeholder="font name"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="4" v-if="!item.path">
            <el-form-item label-width="5px">
              <div class="uploadImg">
                <input type="file" v-model="item.temp" @change="picUpload($event, item)" accept="*/*" />
              </div>
            </el-form-item>
          </el-col> -->
          <el-col :span="6" v-if="item.path">
            <el-form-item label-width="5px">
              <el-input type="text" v-model="item.path" readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2" v-if="item.path">
            <el-form-item label-width="5px">
              <el-button type="danger" icon="el-icon-delete" circle @click="deleteFont(index,item)">
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item>
            <div class="uploadImg" style="float:left;">
              <input type="file" @change="picUpload($event)" accept="*/*" />
              <i class="el-icon-plus"></i>
            </div>
            <span style="margin-left:5px;float:left;color:gray;line-height: 52px;">(上传字体文件名为：字体-样式.(otf\ttf),e.g. NotoSansCJK-Black.js)</span>
          </el-form-item>
        </el-row>
      </el-form>

    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        form: {
          "list": []
        }
      },
      created: function () {
       
        $.post("/font/list",(r) => {
          if (r && r.status) {
            this.form.list = r.data
          }
        })
      },
      watch: {
        // "form.list": {
        //   handler(oldVal, newVal) {
        //     debugger;
        //   },
        //   deep: true

        // }
      },
      methods: {

        deleteFont(i,item) {
          layer.confirm(`是否确认删除字体[${item.name}]?`,{btn: ['确定', '取消'], title: "提示"},()=>{
            layer.closeAll()
            $.post("/font/delete",{"id":item.id},(r)=>{
              if (r && r.status){
                this.form.list.splice(i, 1);
              }else{
                layer.msg(r.msg)
              }
            })

          })

        },
        uploadFile(fileString,fontName, fontStyle) {
          fontName = fontName.toLocaleLowerCase();

          var createdFileName = fontName + '.ttf';
          var jsFile = '';
          jsFile += '(function (jsPDFAPI) {\n';
          jsFile += 'var font = \'' + fileString + '\';\n';
          jsFile += 'var callAddFont = function () {\n';
          jsFile += 'this.addFileToVFS(\'' + createdFileName + '\', font);\n';
          jsFile += 'this.addFont(\'' + createdFileName + '\', \'' + fontName + '\', \'' + fontStyle + '\');\n};\n';
          jsFile += 'jsPDFAPI.events.push([\'addFonts\', callAddFont])\n';
          jsFile += ' })(jsPDF.API);';

         //  jsFile += fileString;

          // jsFile += 'function add'+ fontName +'(doc) {\n';
          // jsFile += 'var font = \'' + fileString + '\';\n';
          // jsFile += 'doc.addFileToVFS(\'' + createdFileName + '\', font);\n';
          // jsFile += 'doc.addFont(\'' + createdFileName + '\', \'' + fontName + '\', \'' + fontStyle + '\');\n';
          // jsFile += ' };';
          //


          var newJsfile = new File([jsFile], fontName + '.js', {
            type: 'text/plain;charset=utf-8'
          });

          upload("/font/upload", {"data":newJsfile, "name":fontName + '.js',fontName},(r)=>{
            if (r&&r.status){
             // let item ={"name":fontName,"path":r.data};
             let item = r.data;
              this.form.list.push(item);
              layer.msg("添加成功!!!",{time:2000})         
            }
              
          })


        },
        picUpload(e) {
          let _this = this;
          if (e.target.files.length == 0) {
            return
          }
          let file = e.target.files[0];
          let fileName = file.name.split(".")[0]        
          var fileReader = new FileReader();
          fileReader.onload = function (e) {
            let fileString = e.target.result;
            fileString = fileString.substr(fileString.indexOf('base64,') + 7)
            _this.uploadFile(fileString,  fileName /*fontName*/ , "normal" /*fontStyle*/ )

          };
          fileReader.readAsDataURL(file);
        }
      }
    })
  </script>
</body>

</html>